<template>
    <view>
        <view class="header" :style="{height:`${isNewIphone()?195:175}px`}">
            <view style="opacity: 0">1</view>
            <view class="nav" :style="{ background, padding: `${statusBarHeight} 0 10px` }">
                <view class="back" @click="onBack">
                    <u-icon size="45" name="arrow-left"/>
                </view>
                检测报告
            </view>
            <view class="row" :style="{marginTop:`${isNewIphone()?85:65}px`}">
                <view class="content">
                    <view class="title" @click="onRefresh">获取最新报告
                        <image src="@/static/img/refesh.png"/>
                    </view>
                    <view class="time">{{ time }}</view>
                </view>
                <view class="btn" @click="onChangeFlag" v-if="data.length">{{ flag ? '取消' : '管理' }}</view>
            </view>
        </view>
        <view class="container" :style="{
            paddingBottom:flag?'60px':0,
             minHeight: `calc(100vh - ${isNewIphone()?175:155}px)`
        }" v-if="data.length">
            <u-swipe-action>
                <u-swipe-action-item :options="options" v-for="(item,i) in data" @click="onRemove(item.id)" :key="i">
                    <view class="row" @click="onCheck(i)" style="border-bottom:1px solid #F4F5F6">
                        <view class="checkbox" v-show="flag" :style="{  border: `1px solid ${item.checked?'transparent':'#999999'}`}">
                            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/showChange.png" v-show="item.checked"/>
                        </view>
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/inspection-report-item.png"/>
                        <view class="content">
                            <view class="title">报告编号：{{ item.code }}</view>
                            <view class="time">{{ item.createTime }}</view>
                        </view>
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/new.png" class="new" v-if="item.new"/>
                        <u-icon size="25" name="arrow-right"/>
                    </view>
                </u-swipe-action-item>
            </u-swipe-action>
            <u-loadmore
                :status="status"
                loadingText="加载中"
                loadmoreText="上拉加载更多"
                nomoreText="已经到底啦～"
                fontSize="28"
                iconSize="30"
                marginTop="20"
                marginBottom="30"
            />
            <view/>
        </view>
        <view class="c-empty" v-else>
            <empty/>
        </view>
        <view class="btn-box " v-if="flag&&data.length">
            <view class="row">
                <view class="content all" @click="onChangeChecked">
                    <view class="checkbox">
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/showChange.png" v-show="checked"/>
                    </view>
                    全选
                </view>
                <view class="btn-row row">
                    已选
                    <text>{{ data.filter(item => item.checked).length }}</text>
                    份
                    <view class="btn" @click="onRemoveMult">删除</view>
                </view>
            </view>
            <view style="height:37px" v-if="filler"/>
        </view>
    </view>
</template>

<script>
import onPullDownRefresh from '../../../mixin/onPullDownRefresh';
import moment            from 'moment';

export default {
    mixins: [ onPullDownRefresh ],
    data() {
        return {
            background: 'transparent',
            statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 10 + 'px',
            flag: false,
            options: [ { text: '删除', style: { backgroundColor: '#F8534E' } } ],
            now: '',
            filler: false,
            time: '',
            first: true
        };
    },
    computed: {
        checked() {
            return this.data.every(item => item.checked);
        }
    },
    methods: {
        onBack() {
            uni.navigateBack();
        },
        async onRemove(ids) {
            const [ , { confirm } ] = await uni.showModal({ content: '确定删除报告？' });
            if (confirm) {
                await this.request.httpTokenJsonRequest(`/mp-api/wx/scanReport/delete/${ids}`, null, 'DELETE');
                this.onRefresh();
            }
        },
        async onRemoveMult() {
            const arr = this.data.filter(item => item.checked);
            if (!arr.length) {
                return uni.showToast({ title: '删除的内容不能为空', icon: 'none' });
            }
            const ids = arr.map(item => item.id).join(',');
            this.onRemove(ids);
        },
        onCheck(i) {
            const { flag, data } = this;
            if (!flag) {
                return uni.navigateTo({ url: `/packageHome/pages/inspectionReportDetail/index?id=${data[ i ].id}` });
            }
            data[ i ].checked = !data[ i ].checked;
        },
        onChangeFlag() {
            const bool = !this.flag;
            if (!bool) {
                this.data.forEach(item => item.checked = false);
            }
            this.flag = bool;
        },
        onChangeChecked() {
            const bool = !this.checked;
            this.data.forEach(item => item.checked = bool);
        },
        async onRequest() {
            const { pageNum, pageSize } = this;
            try {
                if (this.first) {
                    const { data } = await this.request.httpTokenJsonRequest('/mp-api/wx/scanReport/lastSyncTime', null, 'GET');
                    this.time = data;
                    this.now = moment(data);
                } else {
                    const { data: { lastTime, syncTotal } } = await this.request.httpTokenJsonRequest('/mp-api/wx/scanReport/refresh', null, 'GET');
                    this.time = lastTime;
                    this.toast(`成功更新${syncTotal}条报告`);
                }
            } catch (e) {
                this.toast(e.msg);
            }
            this.first = false;
            return this.request.httpTokenJsonRequest('/mp-api/wx/scanReport/list', { pageNum, pageSize }, 'GET');
        },
        formatData(data) {
            return data.map(item => {
                item.checked = false;
                item.new = this.now.isBefore(item.createTime);
                return item;
            });
        },
        isNewIphone() {
            const { model, screenWidth, screenHeight } = uni.getSystemInfoSync();
            let isNewPhone = /(iPhone (X|11|12|13|14|15|16))|(unknown.*iPhone)/.test(model);
            if (isNewPhone) {
                // 判断是否为iphone SE,1334 x 750 像素分辨率
                isNewPhone = !(screenWidth === 375 && screenHeight === 667);
            }
            return isNewPhone;
        },
        toast(title) {
            setTimeout(() => {
                uni.showToast({ title, icon: 'none' });
            }, 150);
        }
    },
    onPageScroll({ scrollTop }) {
        this.background = scrollTop > 30 ? 'white' : 'transparent';
    },
    onLoad() {
        this.onRefresh();
        this.filler = this.isNewIphone();
    }
};
</script>

<style scoped lang="scss">
.header {
    background: url('https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/report_bg.png') no-repeat;
    background-size: cover;
    padding: 0 15px;
    box-sizing: border-box;
    height: 175px;
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        z-index: 1000;
        .back {
            position: absolute;
            left: 15px;
            width: 50px;
            text-align: left;
            image {
                width: 10px;
                height: 18px;
            }
        }
    }
    .row {
        margin-top: 65px;
        .btn {
            width: 54px;
            height: 28px;
            border-radius: 20px;
            border: 1px solid rgba(0, 0, 0,.4);
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .title {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #00604E;
            display: flex;
            align-items: center;
            image {
                width: 12px;
                height: 12px;
                margin-left: 5px;
            }
        }
        .time {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 96, 78,.6);
        }

    }
}
.container {
    background: #FFFFFF;
    border-radius: 20px 20px 0px 0px;
    padding: 0 15px;
    margin-top: -20px;
    min-height: calc(100vh - 155px);
    border-bottom: 1px solid transparent;
    .row {
        padding: 20px 0;
        border-bottom: 1px solid #F4F5F6;
        .title {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .time {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
        }
        .new {
            width: 37px;
            height: 18px;
        }
    }
    .row:last-of-type {
        border-bottom: none;
    }
}
.c-empty {
    height: calc(100vh - 155px);
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    margin-top: -20px;
}
.btn-box {
    background: #FFFFFF;
    box-shadow: 0px -1px 0px 0px rgba(38, 43, 49, 0.06);
    border-radius: 20px 20px 0px 0px;
    padding: 10px 15px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    .all {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .btn-row {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text {
            color: #00604E;
            margin: 0 3px;
        }
        .btn {
            width: 110px;
            height: 40px;
            background: linear-gradient(180deg, #FE7571 0%, #F44D48 100%);
            border-radius: 12px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
        }
    }
}
.row {
    display: flex;
    align-items: center;
    .checkbox {
        width: 18px;
        height: 18px;
        position: relative;
        border-radius: 50%;
        margin-right: 10px;
        image {
            width: 19px;
            height: 19px;
            position: absolute;
            top: -1px;
            left: -1px;
        }
    }
    & > image {
        width: 40px;
        height: 40px;
        margin-right: 15px;
    }
    .content {
        flex: 1;
        margin-right: 15px;
    }
}
</style>
